﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script src="Scripts/CheckHelper.js"></script>
    <script type="text/javascript">
        var color = new CheckHelper();
        color.init("checkAll");
        
        var age =new CheckHelper();
        age.init("checkAgeAll");

      
        //需要单独处理取值
        function getAgeValue(item) {
            return JSON.parse($(item).val())["s"];
        }

        var cl = new CheckHelper();
        cl.init('clCheckAll');
        
        //需要单独处理取值。
        function getClassValue(item) {
            return JSON.parse($(item).attr('id'))["vl"];
        }
    </script>
</head>
    <body>
        <div style="float: left">
            <p>
                <input type="button" value="获取值" onclick="alert(color.values())"/>
                <input type="button" value="置灰" onclick="color.setDisable()"/>
                <input type="button" value="可用" onclick="color.removeDisable()"/>
            </p>
            <input type="checkbox" id="checkAll" name="colorCheck"/> 全选颜色
            <br/>

            <input type="checkbox" name="colorCheck" value="red" />红色
            <br/>
            <input type="checkbox" name="colorCheck" value="blue" />蓝色
            <br/>
            <input type="checkbox" name="colorCheck" value="White" />白色 
            <br/>
        </div>
        <div style="float: left; padding: 20px;">
            <p>另一种情况
                <input type="button" value="取值" onclick="alert(age.values(getAgeValue))"/>
            </p>
            <input type="checkbox" id="checkAgeAll" name="ageCheck"/> 全选年龄
            <br/>
            <input type="checkbox" name="ageCheck" value='{"s":1,"e":10}' />1-10
            <br/>
            <input type="checkbox" name="ageCheck" value='{"s":11,"e":20}' />11-20
            <br/>
            <input type="checkbox" name="ageCheck" value='{"s":21,"e":30}' />21-30 
            <br/>
        </div>
        
         <div style="float: left; padding: 20px;">
            <p>
        <input type="button" value="取值" onclick="alert(cl.values(getClassValue))"/>
            </p>
        <input type="checkbox" id="clCheckAll" name="clCheck"/> 全选班级
        <br/>
        <input type="checkbox" name="clCheck" id='{"desc":"一班","vl":1}' />一班
        <br/>
        <input type="checkbox" name="clCheck" id='{"desc":"二班","vl":1}' />二班
        <br/>
        <input type="checkbox" name="clCheck" id='{"desc":"三班","vl":1}' />三班
        <br/>
            </div>
    </body>
</html>
